<html class="dark">
    <head>
        <link rel="icon" href="./favicon.ico" />
        <meta charset="utf-8" />
        <title><%=title%></title>
        <meta
            name="viewport"
            content="width=device-width,user-scalable=no,initial-scale=1,minimum-scale=1,maximum-scale=1,minimal-ui=true"
        />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="full-screen" content="yes" />
        <meta name="screen-orientation" content="portrait" />
        <meta name="x5-fullscreen" content="true" />
        <meta name="360-fullscreen" content="true" />
        <meta name="renderer" content="webkit" />
        <meta name="force-rendering" content="webkit" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <link rel="stylesheet" type="text/css" href="./index.css" />
    </head>
    <body>
        <%- include(cocosToolBar, {config: config}) %>
        <div class="calculateInfoManager" style="display: flex; align-items: center; margin-left: 10px;">            
            <div style="display: flex; align-items: center; margin-left: 10px;margin-right: 10px;" >
                <input type="checkbox" id="log" checked /><label for="log">log</label>
                <input type="checkbox" id="info" checked/><label for="info">info</label>
                <input type="checkbox" id="warn" checked/><label for="warn">warn</label>
                <input type="checkbox" id="error" checked/><label for="error">error</label>
                <input type="checkbox" id="groupCollapsed" checked/><label for="groupCollapsed">groupCollapsed</label>
                <input type="checkbox" id="timeEnd" checked/><label for="timeEnd">timeEnd</label>
                <input type="checkbox" id="table" checked/><label for="table">table</label>
            </div>         
            <div><button id="btn-calculateInfoManager" style="margin: 5px;"></button></div>         
            <div><button id="btn-calculateInfoManager-clean" style="margin: 5px;"></button></div>
        </div>
        <div style="display: flex;flex: auto;align-items: center;">
            <%- include ./dist/index.html %>
            <div id="content" class="content">
                <div class="contentWrap">
                    <div id="GameDiv" class="wrapper">
                        <div id="Cocos3dGameContainer">
                            <canvas id="GameCanvas" tabindex="-1" style="background-color: '';"></canvas>
                        </div>
                        <div id="splash">
                            <div class="progress-bar stripes"><span></span></div>
                        </div>
                        <div id="bulletin">
                            <div id="sceneIsEmpty" class="inner"><%=tip_sceneIsEmpty%></div>
                        </div>
                        <div class="error" id="error">
                            <div class="title">Error <i>(Please open the console to see detailed errors)</i></div>
                            <div class="error-main"></div>
                            <div class="error-stack"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <%- include(cocosTemplate, {}) %>
    </body>
</html>

<script>
    document.getElementsByClassName('toolbar')[0].insertAdjacentHTML('afterbegin', '<div><button id="btn-show-tree">Tree</button></div>');
    const devtoolsBtn = document.getElementById('btn-show-tree');
    let isOpen = !!localStorage.getItem('ccc_devtools_show');
    toggle(isOpen);
    devtoolsBtn.addEventListener('click', () => {
        isOpen = !isOpen;
        toggle(isOpen);
    }, false);

    function toggle(isOpen) {
        const devApp = document.getElementById('dev-app');
        window.ccdevShow = isOpen;
        if (isOpen) {
            devApp.style.display = 'flex';
            devtoolsBtn.classList.add('checked');
            localStorage.setItem('ccc_devtools_show', 1);
        } else {
            devApp.style.display = 'none';
            devtoolsBtn.classList.remove('checked');
            localStorage.removeItem('ccc_devtools_show');
        }
    }
</script>
<!-- <script>
    let btnListCall = {
        'All': 'all',
        'Mark': 'mark',
        'Log': 'log',
        'Clear': 'clear',
    }
    let bInit = false;
    const checkProto = () => {
        if (!bInit) {
            if(window.ProtoExManager){
                window.ProtoExManager.EnableAllSubProto();
                bInit = true;
                console.log('%c [texture proto] ---init proto success---', `color:#00ff00;font-size:15px;`)
            }else{
                console.log('%c [texture proto] ---init proto fail---', `color:#ff6f00;font-size:15px;`)
            }
        }
    }
    for (let k in btnListCall) {
        document.getElementsByClassName('toolbar')[0].insertAdjacentHTML('beforeend', `<div><button id="btn-res-${btnListCall[k]}">${k}</button></div>`);
        const btn = document.getElementById(`btn-res-${btnListCall[k]}`);
        btn.addEventListener('click', () => {
            checkProto();
            if (window.TextureProto) {
                let func = window.TextureProto[btnListCall[k]].bind(window.TextureProto);
                console.log('%c [texture proto] call func: TextureProto.' + btnListCall[k], `background-color:#aaffbb`)
                if (func && func instanceof Function) {
                    let data = func();
                    if (data){
                        console.log(data)
                    }
                }
            }
        }, false);
    }
</script> -->

<script>
    let init = false 
    let initBtn = false
    let checkBoxs =['log','info','warn','error','groupCollapsed','timeEnd','table']
    checkBoxs.forEach((id,index)=>{        
        const check_box  = document.getElementById(id);
        let temp_func = console[id]
        check_box.addEventListener("change", () => {
            if (check_box.checked) {
                console[id] = temp_func
            } else {
                console[id] = function(...param){}
            }
        });
    })

    const calculateInfoManager = document.getElementById('btn-calculateInfoManager');
    const devtoolsBtn1 = document.getElementById('btn-show-tree');
    let att = window.getComputedStyle(devtoolsBtn1,null)
    calculateInfoManager.style.cssText = att    
    calculateInfoManager.innerHTML = init?"关闭统计":"开启统计"
    let doc = document.getElementsByClassName('calculateInfoManager')
    calculateInfoManager.addEventListener('click', () => {     
        if(!window.CalculateInfoManager){
            alert("游戏初始化中,请稍后尝试")
            return 
        }
        if(!init){            
            const btnList = window.CalculateInfoManager.getInstance().getAllData()
            window.CalculateInfoManager.getInstance().RegAll()
            btnList.forEach((data,k)=> {    
                doc[0].insertAdjacentHTML('beforeend', `<div id=${data.name} style ="display: inline-grid;"></div>`);          
                let _doc = document.getElementById(data.name)                
                _doc.insertAdjacentHTML('beforeend', `<button id="btn-info-${data.name}" style="margin: 5px;">打印${data.name}</button>`);
                const btnInfo = document.getElementById(`btn-info-${data.name}`);
                btnInfo.addEventListener('click', () => {            
                    data.info()
                }, false);
                _doc.insertAdjacentHTML('beforeend', `<button id="btn-clean-${data.name}" style="margin: 5px;">清理${data.name}</button>`);
                const btnClean = document.getElementById(`btn-clean-${data.name}`);
                btnClean.addEventListener('click', () => {            
                    data.clean()
                }, false);                                     
            })
            window.CalculateInfoManager.getInstance().Open()
        }  
        else{
            const btnList = window.CalculateInfoManager.getInstance().getAllData() 
            window.CalculateInfoManager.getInstance().Close()
            btnList.forEach((data,k)=> {
                const btn = document.getElementById(data.name);    
                btn.remove() 
            })
        }          
        init = !init   
        calculateInfoManager.innerHTML = init?"关闭统计":"开启统计"           
    }, false); 

    const calculateInfoManagerClean = document.getElementById('btn-calculateInfoManager-clean');
    calculateInfoManagerClean.innerHTML = "清理全部数据"
    calculateInfoManagerClean.addEventListener('click', () => {
        window.CalculateInfoManager.getInstance().clean()
    },false)
</script>